<template>
	<view class="content">

		<!-- 人员部分 -->
		<view class="item_div">

			<view class="item_sub_div">
				<view class="item_sub_txt">申请人</view>
				<input class="et_sub_txt" placeholder="请输入姓名" maxlength="24" @input="onInputSenderName" :value="info.fill_uname" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">开户行</view>
			</view>

			<view class="item_sub_div">
				<view class="item_sub_txt" style="display: none;">开户行</view>
				<textarea class="et_sub_txt" style="width: 100%;;" placeholder="请输入收款开户行" @input="onInputBank" :value="info.openbank" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">卡号</view>
			</view>

			<view class="item_sub_div">
				<view class="item_sub_txt" style="display: none;">卡号</view>
				<textarea class="et_sub_txt" style="width: 100%;;" placeholder="请输入收款银行卡号" @input="onInputCardNum" :value="info.cardid" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">收款金额</view>
				<input class="et_sub_txt" placeholder="请输入押金金额" maxlength="16" @input="onInputMoney" :value="info.money" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">退押金说明</view>
			</view>

			<view class="item_sub_div">
				<view class="item_sub_txt" style="display: none;">退押金说明</view>
				<textarea class="et_sub_txt" style="width: 100%;;" placeholder="请输入说明" @input="onInputExplain" :value="info.explain" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

		</view>

		<!-- 确定 -->
		<view class="btn_ok" @click="onOk">提交</view>

	</view>
</template>

<script>
	import { getUInfo, } from '@/util/util.js'
	export default {
		data() {
			return {
				info: {
					fill_uname: '', // 申请人
					openbank: '', // 开户行
					cardid: '', // 卡号
					money: '', // 金额
					explain: '', // 说明
				},
			}
		},

		onLoad(opts) {
			console.log('curr.ver = ', '202509240819');
			// 选择物品
			uni.$on('onSelMoney', (data) => {

			})
		},

		methods: {

			// 输入说明
			onInputExplain(e) {
				this.info.explain = e.detail.value
			},
			// 输入金额
			onInputMoney(e) {
				this.info.money = e.detail.value
			},
			// 输入卡号
			onInputCardNum(e) {
				this.info.cardid = e.detail.value
			},
			// 输入开户行
			onInputBank(e) {
				this.info.openbank = e.detail.value
			},
			// 输入开户行
			onInputBank(e) {
				this.info.openbank = e.detail.value
			},
			// 输入领用人姓名
			onInputSenderName(e) {
				this.info.fill_uname = e.detail.value
			},

			// 确定
			onOk() {
				let that = this

				if (!this.info.fill_uname) {
					uni.showToast({ icon: 'none', title: '请输入申请人' })
					return
				}
				if (!this.info.openbank) {
					uni.showToast({ icon: 'none', title: '请输入开户行' })
					return
				}
				if (!this.info.cardid) {
					uni.showToast({ icon: 'none', title: '请输入卡号' })
					return
				}
				if (!this.info.money) {
					uni.showToast({ icon: 'none', title: '请输入押金金额' })
					return
				}
				if (!this.info.explain) {
					uni.showToast({ icon: 'none', title: '请输入说明' })
					return
				}

				// openkey=513fb82e1e54251bb2c0bf95786d136a&m=openApiExternalCost&a=saveGoodsRequisition
				let newObj = {
					openkey: '513fb82e1e54251bb2c0bf95786d136a',
					m: 'openApiExternalCost',
					a: 'saveGoodsRequisition',
					...this.info,
				}
				console.log('准备提交的数据 = ', newObj);
				uni.showModal({ title: '提示', content: '确认提交？', success: (res) => { res.confirm && that.postData(newObj) } })
			},

			// 接口:提交数据
			async postData(newObj) {
				let that = this
				uni.showLoading({ title: '提交中', mask: true, })
				let res = await that.$postGoodsRequisition({ ...newObj })
				if (res.code == 200) {
					that.resetData()
					uni.showModal({
						title: '提示',
						content: `${res.msg}`,
						confirmText: '退出',
						confirmColor: '#000000',
						cancelText: '继续申请',
						cancelColor: '#0E73B6',
						success: (res) => {
							if (res.confirm) {
								// uni.showModal({ title: '提示', content: '提交成功请自行退出当前页面。', showCancel: false })
							}
						}
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 重置数据
			resetData() {
				// info: {
				// 	fill_uname: '', // 申请人
				// 	openbank: '', // 开户行
				// 	cardid: '', // 卡号
				// 	money: '', // 金额
				// 	explain: '', // 说明
				// },
				this.info = {}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.item_txt {
		font-size: 28rpx;
		/* margin: 12rpx 0 0 0; */
	}

	.item_sub_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		margin: 10rpx 0 0 0;
		/* background-color: red; */
	}

	.item_sub_txt {
		font-size: 28rpx;
		font-weight: bold;
		margin: 0rpx 0 0 0rpx;
	}

	.et_sub_txt {
		width: 60%;
		height: 100%;
		text-align: right;
		font-size: 28rpx;
		/* background-color: red; */
	}

	.et_take_num {
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #f0f0f0;
	}

	.btn_plus_min {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #f0f0f0;
		margin: 0 6rpx 0 6rpx;
	}

	.del_goods {
		padding: 36rpx 0rpx 36rpx 24rpx;
		color: orangered;
		font-weight: bold;
		font-size: 28rpx;
	}

	.add_goods {
		align-self: center;
		padding: 18rpx 12rpx 12rpx 12rpx;
		font-weight: bold;
	}

	.btn_ok {
		align-self: center;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		color: white;
		background: #0E73B6;
		border-radius: 16rpx;
		margin: 36rpx 0 36rpx 0;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		height: 34vh;
		background-color: white;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.pop_div_1 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}
</style>